<!-- views/User.vue（热卖专区子页面） -->
<template>
  <div class="user-page">
    <h2>热卖专区</h2>
    <div class="goods-list">
      <!-- 商品列表内容（示例） -->
      <el-card v-for="(item, idx) in goods" :key="idx" class="goods-card" shadow="hover">
        <img :src="item.img" alt="商品图片" class="goods-img">
        <div class="goods-info">
          <h3>{{ item.name }}</h3>
          <p class="price">¥{{ item.price }}</p>
          <p class="sales">销量：{{ item.sales }}件</p>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
// 模拟商品数据
import {ref} from "vue";

const goods = ref([
  {
    name: "键盘",
    price: 200,
    sales: 32,
    img: "https://wen-gloupfive.oss-cn-hangzhou.aliyuncs.com/9EWzlvMNcSNI5Wk2GXYS.jpg"
  },
  {name: "吉他", price: 648, sales: 18, img: "https://picsum.photos/id/2/300/200"},
  {name: "篮球", price: 159, sales: 45, img: "https://picsum.photos/id/3/300/200"}
]);
</script>

<style scoped>
.user-page {
  padding: 10px 0;
}

.goods-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.goods-card {
  display: flex;
  flex-direction: column;
}

.goods-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.goods-info {
  padding: 10px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.price {
  color: #ff4d4f;
  font-weight: bold;
  margin: 8px 0;
}

.sales {
  font-size: 12px;
  color: #999;
  margin-top: auto;
}
</style>